<template>
  <div>
    <!-- <van-nav-bar
      title="确认订单"
      left-arrow
      @click-left="jumPage('/cj/Cjpassageway')"
      left-text="返回"
      style="color:white;background:#2A71C8"
    /> -->
    <div style="background:white;" class="pad-t-20">
      <p class="phone f-30">
        金额:
        <span>{{amount}} 元</span>
      </p>
      <p class="phone f-30">
        支付卡:
        <span>{{cardDetial.bankCard |fmtbankcode}}({{cardDetial.bank}})</span>
      </p>
       <p class="phone f-30">
        结算卡:
        <span>{{savingsDepositCardSel.bankCard |fmtbankcode}}({{savingsDepositCardSel.bank}})</span>
      </p>
    </div>

    <van-cell-group style="margin-top:10px;">
      <!-- <van-field label="CVV2:" type="number" v-model="cvv2" placeholder="卡背面后3位" />
      <van-cell @click="hkrl" title="有效月" is-link>
        <span v-if="senData.selMonth" class="c000">{{senData.selMonth}}</span>
        <span v-else style="color:#949494;">请选择</span>
      </van-cell>
      <van-cell @click="hkrlYear" title="有效年" is-link>
        <span v-if="senData.selYear" class="c000">{{senData.selYear}}</span>
        <span v-else style="color:#949494;">请选择</span>
      </van-cell> -->
      <!-- <van-cell @click="hkrlCity" title="落地城市" is-link>
        <span v-if="senData.selCity.sh.name" class="c000">{{senData.selCity.sh.name}}{{senData.selCity.shi.name}}</span>
        <span v-else style="color:#949494;">请选择</span>
      </van-cell> -->
      <!-- <van-field label='有效期(年):' type='number' v-model="year" placeholder="例：18" /> -->
      <!-- <van-field label='有效期(月):' type='number' v-model="month" placeholder="例：09" /> -->
    </van-cell-group>
    <div class="fiex mag-t-20 bg-fff" style="border-bottom: 1px solid #ebedf0;">
        <van-field
          class="fiex1 not-b"
          label="手机号:"
          type="number"
          v-model="cardDetial.reservePhone"
          placeholder="请输入手机号"
        />
        <!-- <p
          class="mag-r-40 f-30"
          style="background:none;color:#2A71C8;border:none"
          @click="smss()"
        >{{fayzm}}</p> -->
      </div>
       <div class="fiex bg-fff" style="border-bottom: 1px solid #ebedf0;">
          <van-field class="fiex1" v-model="sms" center clearable label="验证码:" placeholder="请输入短信验证码"></van-field>
           <p
          class="mag-r-40 f-30"
          style="background:none;color:#2A71C8;border:none"
          @click="smss()"
        >{{fayzm}}</p>
       </div>
    <p
      class="f-30"
      style="width:95%;text-align:left;margin-left:2.5%;margin-top:10px;color:#EC5551;"
    >
      <!-- <span>*</span>请根据提示认真填写您的信息，信息已加密且仅用于身份验证，可放心提交 -->
    </p>
    <button class="ktbtn" @click="pay">确定</button>
    <!-- 选择有效月 -->
    <van-popup v-model="hkshow" position="bottom" :overlay="true">
      <van-area
        :area-list="mounth"
        @cancel="hkshow=false"
        columns-num="1"
        title="有效月"
        @confirm="selhkOk"
      />
    </van-popup>
    <!--选择有效年 -->
    <van-popup v-model="hkshowYear" position="bottom" :overlay="true">
      <van-area
        :area-list="yearList"
        @cancel="hkshowYear=false"
        columns-num="1"
        title="有效年"
        @confirm="selhkrlYear"
      />
    </van-popup>
    <van-popup v-model="hkshowCity" position="bottom" :overlay="true">
      <van-area
        :area-list="cityList"
        @cancel="hkshowCity=false"
        columns-num="2"
        title="有效年"
        @confirm="selhkrlCity"
      />
    </van-popup>
  </div>
</template>

<script>
import cityList from '@/views/are.js'
var $th ="";
    import {
        Toast
    } from 'vant';
    export default {
        data() {
            return {
                cityList:cityList,
                mounth:{
                    province_list: {},
                },
                yearList:{
                    province_list: {},
                },
                mark:this.$route.params.mark,
                cvv2: "",
                year: "",
                month: "",
                sms:"",
                yzmdata: '',
                fayzm: '发送验证码',
                orderNo: '',
                aisleMerId:'',
                cardDetial:{ //卡详情
                },
                senData:{
                    selMonth:"", //有效月
                    selYear:"",//有效年
                    selCity:{
                        sh:{
                            name:"",
                            code:"",
                        },
                        shi:{
                            name:"",
                            code:"",
                        }
                    }
                },
                hkshow:false, //选择月
                hkshowYear:false, //选择年
                hkshowCity:false,// 选择城市
                cardDetialJson:"" //缓存
                ,savingsDepositCardSel:""//选择的储蓄卡列表
                ,amount:""//金额
                ,passageway:""//用户费率
            }
        },
        created() {
           //获取卡信息
           //读取卡信息
              var selscList = JSON.parse(localStorage.getItem("selscList"));//信用卡
              this.savingsDepositCardSel = JSON.parse(localStorage.getItem("savingsDepositCardSel"));//储蓄卡
              this.passageway = JSON.parse(localStorage.getItem("passageway"));
              this.amount = localStorage.getItem("amount");
              this.cardDetial = selscList;
            // this.$Spin.hide();
        },
        async mounted(){
                 $th  = this;
                 //月份列表
                 for(var i=12; i>0 ;i--){
                       this.mounth.province_list[i] = i;
                 }
                 //年份列表
                var myDate = new Date();
                var tYear = myDate.getFullYear();
                tYear =  tYear.toString().substr(2,2)*1;
                this.yearList.province_list[tYear] = tYear;
                 for(var i=0; i<10 ;i++){
                       tYear+=1;
                       this.yearList.province_list[tYear] = tYear;
                 }
                 console.log("tYear",this.yearList.province_list)
                return
                $th.cardDetialJson = JSON.parse(localStorage.getItem("commitPlan"));
                var cardId = localStorage.getItem("cardId");
                try {
                    var cardDetial = await $th.$axiosFun('/customer/bankCard/findCardById',{
                        id:cardId
                    },'get');
                    if(cardDetial.code==1000){
                        $th.cardDetial = cardDetial.data;
                        // $th.cardDetial = cardDetial.data;
                        // $th.cardDetial.overTime = $th.$fmthkdate($th.cardDetial.statementDate,$th.cardDetial.repaymentDate); //计算距离账单日的时间
                 }else{
                        $th.$toast(cardDetial.message);
                    }
                    console.log("接口返回的结果",cardDetial)

            } catch (error) {
                console.log("error",error)
            }

        },
        methods: {
            
            hkrlCity(){ //选择城市 开启
                $th.hkshowCity = true;  
            },
            selhkrlCity(val){ //选择城市 关闭
                console.log(val)
                $th.senData.selCity.sh = val[0];
                $th.senData.selCity.shi = val[1];
                $th.hkshowCity = false;  
            },
            hkrlYear(){ //选择年 开启
                $th.hkshowYear = true;  
            },
            selhkrlYear(val){ //选择年

                $th.senData.selYear = $th.PrefixInteger(val[0].code,2)
                $th.hkshowYear = false; 
            },
            hkrl(){ //选择
                  $th.hkshow = true; 
            },
            selhkOk(val){ //关闭
                  $th.senData.selMonth = $th.PrefixInteger(val[0].code,2)
                  $th.hkshow = false; 
            },
           async smss() {
              console.log("$th.passageway",$th.passageway)
                //  if ($th.cvv2 == null || $th.cvv2.length != 3) {
                //     Toast('请输入正确的cvv2');
                //     return;
                // }
                // if ($th.senData.selYear == null || $th.senData.selMonth == null) {
                //     Toast('请选择正确的有效期');
                //     return;
                // }
                if ($th.fayzm != '发送验证码' && $th.fayzm != '重新发送') {
                    Toast('请勿重复点击');
                    return
                }
                 var sendData = {
                   customerId:$th.cardDetial.customerId, //用户id
                   cardId:$th.cardDetial.id,//信用卡id
                   bankCode:$th.cardDetial.bankCode,//信用卡bankCode
                   closeCardId:$th.savingsDepositCardSel.id,//结算卡id
                   closeBankCode:$th.savingsDepositCardSel.bankCode,//结算卡bankCode
                   amount:$th.multiple($th.amount,0.01),//金额
                   rate:$th.multiple($th.passageway.rate,0.01).toString(),//费率
                   d0fee:$th.passageway.d0Fee.toString(),//费率
                  //  expired:$th.senData.selYear + $th.senData.selMonth, //有效年月
                   expired:'2405', //有效年月
                   mobile:$th.cardDetial.reservePhone,//手机号
                  //  cvv2:$th.cvv2,
                   cvv2:"123",
                }
                var cardDetial = await $th.$axios($th.GLOBAL.host+'/xs/commitOrder',sendData,'post');
                    if(cardDetial.code=='0000'){
                        Toast.success({
                            mask: true,
                            message: '发送成功'
                        });
                        $th.orderNo =cardDetial.data.orderNo; //返回的订单号 
                        $th.fayzm = 60;
                        let self = this;
                        let timer = window.setInterval(function(){
                            self.fayzm = self.fayzm - 1;
                            if (self.fayzm < 1) {
                                clearInterval(timer)
                                self.fayzm = '重新发送'
                            }
                        }, 1000)
                 }else{
                        $th.$toast(cardDetial.msg);
                 }
     
            },
           async pay() {
                // if ($th.cvv2 == null || $th.cvv2.length != 3) {
                //     Toast('请输入正确的cvv2');
                //     return;
                // }
                // if ($th.senData.selYear == null || $th.senData.selMonth == null) {
                //     Toast('请选择正确的有效期');
                //     return;
                // }
                if($th.sms=='') {
                    Toast('请输入验证码');
                    return;
                }
                var sendData = {
                   customerId:$th.cardDetial.customerId, //用户id
                   orderNo:$th.orderNo, //订单id 发送短信获得
                   verifyCode:$th.sms
                }
                console.log("sendData",sendData)
                var cardDetial = await $th.$axios($th.GLOBAL.host+'/xs/sureOrder',sendData,'post');
                if(cardDetial.code=="0000"){
                    $th.$router.push({
                       name:"/cj/success"
                    })
                }else{
                    localStorage.setItem("errorMsg",cardDetial.msg)
                     $th.$router.push({
                       name:"/cj/error"
                    })
                }
              
            },
            goback() {
                this.$router.push('/')
            }
        },
        filters: {

            fmtbankcode: function (bank) {
                if(bank){
                     return bank.substr(0, 4) + "********" + bank.substr(-4);
                }
               
            },
            fmtscname: function (fmtscname) {
                var mccname = {
                    'ICBC': "工商银行",
                    'ABC': "农业银行",
                    'BOC': "中国银行",
                    'CCB': "建设银行",
                    'CMBCHINA': "招商银行",
                    'POST': "邮政储蓄",
                    'ECITIC': "中信银行",
                    'CEB': "光大银行",
                    'BOCO': "交通银行",
                    'CIB': "兴业银行",
                    'CMBC': "民生银行",
                    'PINGAN': "平安银行",
                    'CGB': "广发银行",
                    'HXB': "华夏银行",
                    'SPDB': "浦发银行",
                    'SHB': "上海银行",
                    'CBHB': "渤海银行",
                    'JSB': "江苏银行"
                };
                if (mccname[fmtscname] == "undefind") {
                    return fmtscname;
                } else {
                    return mccname[fmtscname];
                }
            }
        },
    }
</script>
<style scoped>
.phone {
  color: #636363;
  padding: 10px 20px;
  font-size: 16px;
}
.van-nav-bar__text {
  color: white;
}
.van-nav-bar .van-icon {
  color: white;
}
.van-nav-bar .van-icon {
  display: inline-block;
}
.van-nav-bar__title {
  color: white;
}
.ktbtn {
  color: white;
  display: block;
  border: none;
  background-color: #2a71c8;
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  line-height: 40px;
  border-radius: 10px;
}
</style>
<style>
.van-nav-bar .van-icon {
  color: white;
}
</style>

          

